<template lang="pug">
  .header-menu
    MainMenu
    .user-logo
      el-popover(placement="bottom" width="220" trigger="hover")
        .popover-content
            .user-name(style="fontSize:16px")
                span(style="fontSize:22px;fontWeight:700") {{username}}
                span(style="color:#72c648") {{' 超级管理员'}}
            .custom-content
                .advance-edit
                    i(class="el-icon-edit")
                    span 编辑模式
                    el-switch(v-model="editTool" active-color="#13ce66" inactive-color="#94b2d1"
                        active-value="show" inactive-value="hide")
                //- .theme
                //-     .title
                //-         img(src='../assets/image/header/logout.svg' style="width:20px")
                //-         span(style="paddingLeft:8px") 主题
                //-     .select
                //-         .theme-item
                //-             img
                //-             .name
                //-         .theme-item
                //-             img
                //-             .name

                .signout(style="display:flex;align-items:center;marginTop:10px;cursor: pointer;"
                    @click="signout")
                    img(src='../assets/image/header/logout.svg' style="width:20px")
                    span(style="paddingLeft:8px") 退出登录
        .logo-img(slot="reference")
</template>

<script>
import MainMenu from '@/components/headerMenu/MainMenu'

export default {
  name: 'HeaderMenu',
  components: {
    MainMenu
  },
  data () {
    return {
      username: 'gisleung',
      editTool: false
    }
  },
  methods: {
    signout () {

    }
  }
}
</script>

<style lang="stylus" scoped>
.user-logo
    z-index 55
    position: fixed;
    top: 14px;
    right: 28px;
    width 46px
    height 46px
    border-radius: 50%;
    background-color #8cd7ff
    box-shadow #2d2d2d8c 0px 0px 4px
    .signout
        width fit-content
    .logo-img
        width 46px
        height 46px
        border-radius: 50%;
        cursor pointer
        background-size 100% 100%
        background-image url('../assets/image/header/user1.jpg')
</style>
